کلات رایج در کدنویسی معتبر و رفع آنها

قبل از پرداختن به اشتباهات رایج کدنویسی و راه حل آنها، باید با سرویس اعتبار سنجی w3c آشنا باشید، این سرویس توسط کنسرسیوم جهانی وب راه اندازی شده و کدنویسی صفحات را در زمینه زبان های HTML، CSS، XHTML و ... سنجش می کند، البته معمولا برای هر دسته از زبان ها یک آدرس مجزا در نظر گرفته شده است که در زیر ملاحظه می کنید:
اعتبار سنجی کدهای HTML، XHTML و...:

validator.w3.org

اعتبار سنجی کدهای CSS:

jigsaw.w3.org/css-validator

با مراجعه به سرویس های بالا و درج آدرس صفحات وب یا فایل های css می توانید از معتبر بودن کدها یا اشکالات موجود در آنها مطلع شوید، البته همان طور که اشاره شد، هیچ الزامی برای کدنویسی معتبر نیست و خیلی از صفحات وب پر از خطاهای مختلف هستند که ممکن است تاثیر چندانی هم بر ظاهر آنها نداشته باشد (هر چند بر رتبه آنها در seo کم و بیش تاثیر منفی خواهد داشت)، از طرفی اهمیت معتبر بودن کدهای مربوط به استایل css از معتبر بودن کدهای html کم تر است، چرا که کدهای html مستقیما توسط ربات موتورهای جستجو مورد تحلیل قرار می گیرد و نقش اصلی در پردازش یک سایت یا وبلاگ دارد، اما استایل css عمدتا توسط ربات ها بررسی نمی شود (هر چند در مورد ربات گوگل ممکن است این طور نباشد).
نکته 1: با استفاده از قابلیت نصب Add-ons (پلاگین های اضافه شونده) در مرورگر هایی مانند فایرفاکس، گوگل کروم و... می توانید بدون مراجعه مستقیم به سرویس های فوق، از خدمات آنها استفاده کنید.
نکته 2: قبل از هر نوع تغییر در کدنویسی سایت یا قالب وبلاگ، فراموش نکنید که یک پشتیبان از آن تهیه نمائید تا در صورت بروز مشکلات ناخواسته بتوانید وضع را به حالت سابق برگردانید.

کدنویسی بر اساس نسخه html

اولین نکته ای که برای نوشتن کدهای معتبر در وب باید به آن توجه کنیم، نسخه html است که قصد استفاده از آن را داریم، توضیح اینکه زبان html در نسخه های متفاوتی ارائه شده که هر کدام تفاوت هایی با هم دارند، به طور مثال نسخه XHTML 1.0 Transitional با HTML 4.01 Transitional متفاوت است، برای کسب اطلاعات بیشتر می توانید مطلب زیر را مطالعه کنید:
چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟

از قلم انداختن تگ های اصلی

یکی از خطاهایی که ممکن است سرویس اعتبارسنجی w3c از کد نویسی ما داشته باشد، خطای از قلم انداختن تگ های اصلی است که با عبارت نمونه زیر مشخص می شود:

end tag for "head" which is not finished

این خطا معمولا به دلیل از قلم انداختن تگ های اصلی مانند title است که باید برای صفحه خود یک عنوان با استفاده از تگ title در بین تگ های head تعریف کنید.

استفاده نکردن از ویژگی xmlns برای html

یکی دیگر از خطاهای رایج در کدنویسی html، خطای Missing xmlns attribute است:

Missing xmlns attribute for element html. The value should be: http://www.w3.org/1999/xhtml

این خطا معمولا به دلیل تعریف نکردن آدرس استاندارد xhtml در ابتدای تگ html است (زمانی که از نسخه xhtml استفاده می کنید باید در تگ html به مرجع xhtml آن آدرس دهید)، برای رفع آن باید تگ ابتدایی html به صورت زیر باشد:

استفاده نادرست از تگ های یکتا

در نسخه های مختلف html، تگ های یکتایی مانند img، br، meta و... با علامت / در انتهای تگ یا بدون آن بسته می شوند، به طور مثال در xhtml تگ br باید به صورت زیر بسته شود.

<br />

اما همین تگ در html نسخه 5 در حالت استاندارد به صورت زیر بسته می شود (هر چند ممکن است حالت های دیگر نیز مجاز باشند).

<br>

حال اگر این تگ ها را در نسخه های متفاوت به صورت غیر استاندارد استفاده کنید خطای نمونه زیر را دریافت خواهید کرد:

end tag for "br" omitted, but OMITTAG NO was specified

برای رفع این مورد باید به دنبال تگ مشخص شده در خطا باشید و انتهای آن را با علامت / یا بدون آن ببندید.

استفاده نادرست از تگ های جفتی

اکثر تگ های html به صورت جفتی تعریف می شوند، به طور مثال وقتی از بلاک div استفاده می کنید باید به صورت نمونه زیر کد آن را تعریف کنید.

اگر به فرض تگ دوم را با علامت / نبندید یا اینکه یکی از تگ ها را به طور کامل از قلم بیندازید، خطای نمونه زیر را دریافت خواهید کرد:

end tag for "div" omitted, but OMITTAG NO was specified

استفاده از خاصیت های منسوخ شده

در ابتدای پیدایش html و در نسخه های اولیه برخی از خاصیت های مربوط به جلوه های ظاهری برای تگ ها به صورت خطی قابل استفاده بود، به طور مثال می توانستیم از خاصیت align به طور مستقیم برای چینش عناصر استفاده کنیم، اما به تدریج در نسخه های جدیدتر ویژگی های ظاهری به استایل css منتقل شد و دیگر تعریف آنها به صورت خطی مجاز نیست (البته اگر از DOCTYPE Strict استفاده کنید)، به همین دلیل به جای align باید از text-align استفاده کنیم.
نمونه خطای دریافتی:

there is no attribute "align"

مشابه همین خطا ممکن است در مورد خاصیت border برای تگ img در html نسخه 5 رخ دهد.

The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead.

استفاده از جاوا اسکریپت به صورت خطی

اگر در صفحات خود به صورت خطی (inline) از جاوا اسکریپت استفاده کنید، این کار ممکن است باعث نمایش خطاهای ناخواسته شود، برای جلوگیری از بروز این نوع خطاها درابتدای کدهای خود از تگ CDATA استفاده نمائید، به طور مثال:

استفاده نکردن از خاصیت های الزامی

زمانی که از یک تصویر در صفحه خود استفاده می کنید، باید در کنار تگ img، خاصیت alt (متن جانشین تصویر) را نیز تعریف کنید، در غیر این صورت ممکن است با خطای زیر مواجه شوید:

An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

همین مورد ممکن است برای کدهای جاوا اسکریپت نیز اتفاق بیفتد، به طور مثال استفاده از type برای وارد کردن کدهای جاوا اسکریپت الزامی است و لذا مثال زیر اشتباه است:

نمونه خطای دریافتی:

required attribute "type" not specified

کد صحیح:

استفاده از کاراکتر & در آدرس های وب

اگر در آدرس های وب (URL) موجود در صفحات سایت یا وبلاگ شما از کاراکتر & استفاده شود، خطای زیر را دریافت خواهید کرد:

& did not start a character reference. (& probably should have been escaped as &.)

برای رفع این خطا باید به جای علامت & از کاراکتر استاندارد ;amp& در تمام لینک ها استفاده کنید، به طور مثال لینک زیر صحیح نیست:

نمونه صحیح:

استفاده از تگ embed

اگر چه تگ embed معمولا در صفحات وب برای نمایش کلیپ های فلش، پخش ویدئو، صدا و... مورد استفاده قرار می گیرد، اما جالب است که سرویس اعتبارسنجی w3c آن را معتبر نمی داند و نمونه خطای زیر را ممکن است نمایش دهد:

element "embed" undefined

برای رفع این گونه مشکلات یک راه حل (که به نظر تنها راه حل کاربردی نیز می رسد) استفاده از document.write در جاوا اسکریپت است، بدین صورت کدهایی که باید مستقیم در صفحه قرار گیرند با واسطه جاوا اسکریپت درج می شوند، به طور مثال از کد زیر می توان برای درج کلیپ فلش استفاده کرد بدون اینکه کدنویسی نامعتبر شود:

تعریف چندباره id

هر عنصر در صفحات وب مجاز به استفاده از یک id منحصر به فرد است و لذا اگر چند عنصر با یک id در کدنویسی خود داشته باشیم با خطای زیر مواجه خواهیم شد:

ID "div-id" already defined

برای رفع این خطا باید در کد خود به دنبال id های مشترک باشید و برای هر عنصر از یک id منحصر به فرد استفاده کنید.

چینش اشتباه تگ ها درون هم

استفاده از تگ ها در html باید طبق استاندارد خاصی انجام شود، به طور مثال درون تگ p که مربوط به پاراگراف است، مجاز به استفاده از تگ div نیستیم.
نمونه خطای دریافتی:

document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

لذا نمونه زیر اشتباه است:

نمونه صحیح:

به این حالت در اصطلاح تگ های آشیانه ای یا nested می گویند که باید اصول و استاندارد آنها در کدنویسی رعایت شود.
در پایان این مطلب یادآور می شویم که خطاهای اعتبارسنجی محدود به موارد گفته شده نیستند، از طرفی اگر سایت یا وبلاگ فعلی شما دارای خطاهای زیادی است ولی با این حال در موتورهای جستجو رتبه خوبی دارد، شاید اصلاح و استانداردسازی کدها چندان هم ضروری نباشد، چرا که خیلی از موارد خطای w3c از دید موتورهای جستجو مشکل جدی تلقی نمی شوند و تنها تعداد خاصی از آنها تاثیر مستقیم بر رتبه سایت یا وبلاگ شما دارند.

نظرات شما عزیزان: